* {margin:0;padding:0}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:HiraginoSansGB-w3,Arial,SimHei,sans-serif;font-size:100%;background:#f0f0f0; color:#333}
body{-webkit-backface-visibility:hidden;-webkit-backface-visibility:hidden;font-family:HiraginoSansGB-w3,Arial,SimHei,sans-serif;font-size:100%;background:#fff; color:#333}
html,body{ overflow-x: hidden;}
article,aside,details,figcaption,figure,footer,header,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{color:#333;text-decoration:none;cursor:pointer}a:hover{outline:none;/*color:#ff3f6e*/}
h1,h2,h3,h4,h5,h6{font-size:100%;}em,i{ font-weight:normal; font-style:normal}
abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}
dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}
pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}
sup{vertical-align:text-top}sub{vertical-align:text-bottom}
img,iframe,fieldset,legend{border:0}
input,select,textarea{font-family:HiraginoSansGB-w3,Arial,SimHei,SimSun,sans-serif}
button,input{line-height:normal}button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box}
table{border-collapse:collapse;border-spacing:0}
.clear{clear:both}
.clearfix:after {visibility:hidden;display:block;content:"";clear:both;height:0}
.clearfix{*zoom:1}


ul {list-style: none}
li {float: left}
.f_l {float: left}
.f_r {float: right}
.m_t_15 {margin-top: 15px;}
.m_t_20 {margin-top: 20px;}
.m_t_25 {margin-top: 25px;}
.m_l_5 {margin-left: 5px;}
.m_l_10 {margin-left: 10px;}
.m_l_15 {margin-left: 15px;}
.m_l_20 {margin-left: 20px;}
.m_l_25 {margin-left: 25px;}
.m_l_30 {margin-left: 30px;}
.m_l_35 {margin-left: 35px;}
.m_r_10 {margin-right: 10px;}

.bg_blue {background: #16a085}
.bg_red {background: #e74c3c}
.bg_yello {background: #f1c40f}
.bg_dark_blue {background: #206a9b}
.bg_purple {background: #8e44ad}
.bg_white {background: white}
.bg_orange {background: #eb6a4c}
.bg_dark_pur {background: #cc467c}

.bg_f0 {background: #f0f0f0}
.bg_e0 {background: #e0e0e0}


.fixed_top_0 {position: fixed; left: 0; top: 0}
.substr_1{overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.substr_2{overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.substr_3{overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.substr_4{overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.substr_5{overflow: hidden;-ms-text-overflow: ellipsis;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 5;-webkit-box-orient: vertical;}



.nav {height: 56px; line-height: 56px; width: 100%; background: #eb5256; border-top: #b74043 solid 1px; margin-top: 0; z-index: 1000; overflow: hidden}
.nav img {margin-left: 9.4%; vertical-align: middle; display: inline-block; border-radius: 15px;}
.nav .login_user {margin-left: 5px; display: inline-block; color: white; font-size: 16px; padding: 0 10px;}
.nav ul {display: inline-block; float: right; margin-right: 94px;}
.nav .nav_title li {margin-right: 22px; height: 100%;}
.nav .nav_title li a {display: inline-block; color: white; font-size: 9.72px;}

body {background: #f0f0f0}
.conbg {max-width: 1000px; min-height: 1000px; margin: 0 auto; position: relative}
.index {position: relative;}
.index .banner {height: 430px;}
.index .banner_box {position: absolute; top: 100px; right: 9%; width: 400px; height: 250px; overflow: hidden}
.index .banner_box .banner_arrow_l {position: absolute; left: 0; top: 109px;}
.index .banner_box .banner_arrow_r {position: absolute; right: 0; top: 109px;}
.index .banner_box ul {width: 320px; height: 200px; margin-left: 40px; margin-top: 25px; position: relative}
.index .banner_box ul li {position: absolute;}
.index .banner_box .banner_div {width: 100%; height: 100%; position: relative;}
.index .banner_box .banner_div span {position: absolute; bottom: 0; left: 0; height: 30px; line-height: 30px; width: 100%; display: block; background: rgba(0,0,0, 0.5); color: #fff; font-size: 14px; text-align: center; text-overflow: ellipsis}

.index .banner_text {position: absolute; top: 66px; left: 9.4%; width: 370px; height: 300px;}
.index .banner_text .banner_title {font-size: 50px; line-height: 60px; color: white; height: 240px; overflow: hidden}
.index .banner_text .banner_subTit {font-size: 16.67px; color: white; position: absolute; bottom: 0; height: 40px; line-height: 40px; left: 50px;}

.index .con_ser {width: 100%; text-align: center; padding-bottom: 30px; background: #fff}
.index .con_video { text-align: center;}
.index .con_about { background: #fff; text-align: center; padding-bottom: 30px}
.index .con_skill {text-align: center;  padding-bottom: 30px; background: #fff}
.index .con_team {padding-bottom: 30px; background: #fff}
.index .con_team_1 {background: #3498db; padding-top: 40px; text-align: center; padding-bottom: 20px;}
.index .con_team_2 {background: #fff; text-align: center; padding-bottom: 10px;}
.index .con_work {text-align: center; background: #fff}
.index .con_work_1 {background: white; padding-top: 40px; padding-bottom: 30px}
.index .con_work_2 {}
.index .con_poly {background: #fff; padding-top: 40px; padding-bottom: 30px}
.index .con_client {min-height: 445px; background: #fff; text-align: center;}
.index .con_client_1 {min-height: 280px; background: url("../images/client_bg.png");}
.index .con_client_2 {padding-bottom: 30px;}
.index .con_blog {min-height: 605px; background: #fff; padding-top: 1px; text-align: center;  padding-bottom: 10px}
.index .con_contact {min-height: 510px; padding-top: 40px; background: url("../images/contact_bg.png"); text-align: center;  padding-bottom: 30px}


.index .con_title {margin: 0 auto; font-size: 22px;}
.index .con_line {display: inline-block; height: 5px; width: 40px; margin: 4px auto 0;
    -webkit-transition: all 0.6s ease 0.2s;
    -moz-transition: all 0.6s ease 0.2s;
    -ms-transition: all 0.6s ease 0.2s;
    -o-transition: all 0.6s ease 0.2s;
    transition: all 0.6s ease 0.2s;
}
.index .con_subTitle {font-size: 11px; width: 396px; line-height: 20px; margin: 22px auto 0px}

/*service*/
.index .con_ser_top {min-height: 130px; padding-top: 40px}
.index .con_ser_bot {margin: 20px auto 0;}
.index .con_ser_item {width: 250px; padding-left: 15px; padding-right: 15px; display: inline-block; margin-bottom: 10px;}
.index .con_ser_item img {
    -webkit-transition: all 0.6s ease 0.2s;
    -moz-transition: all 0.6s ease 0.2s;
    -ms-transition: all 0.6s ease 0.2s;
    -o-transition: all 0.6s ease 0.2s;
    transition: all 0.6s ease 0.2s;
}
.index .con_ser_item h1 {font-size: 15.28px; color: #000; margin-top: 18px;}
.index .con_ser_item p { font-size: 11.11px; color: #5f6f81; margin-top: 12px; line-height: 18px;}


/*video*/
.index .con_video {position: relative; overflow: hidden}
.index .con_video .bg {
    display: block;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
}
.index .con_video div {position: absolute; width: 100%; top: 0; left: 0; overflow: hidden}
.index .con_video .tag {margin-top: 38px}
.index .con_video h1 {font-size: 33.33px; line-height: 40px; margin-top: 12px; color: white}


/*about*/
.con_about {padding-top: 40px;}
.con_dark_line_h {height: 2px; background: #afbbbc; width: 20px; display: block; margin: 16px auto 0;}
.con_dark_line_v {height: 40px; width: 2px; background: #afbbbc; display: block; margin: 0px auto 0}
.circle_text {width: 36px; height: 36px; line-height: 36px; font-size: 9.72px; color: #afbbbc; display: block; margin: 10px auto; border-radius: 20px; border: #afbbbc solid 2px;
    -webkit-transition: all 0.6s ease 0.2s;
    -moz-transition: all 0.6s ease 0.2s;
    -ms-transition: all 0.6s ease 0.2s;
    -o-transition: all 0.6s ease 0.2s;
    transition: all 0.6s ease 0.2s;
}
.con_about_con {width: 438px; height: 254px; display: inline-block; background: url("../images/con_about_img.png"); position: relative}
.con_about_div {height: 0;
    position: absolute;
    width: 100%;
    overflow: hidden;
    opacity:0.5;
    background: #000;
    -webkit-transition: all 0.6s ease 0.2s;
    -moz-transition: all 0.6s ease 0.2s;
    -ms-transition: all 0.6s ease 0.2s;
    -o-transition: all 0.6s ease 0.2s;
    transition: all 0.6s ease 0.2s;
}
.con_about_div h1 {font-size: 15.28px; color: white; margin-top: 90px;}
.con_about_div p {font-size: 10px; color: white; width: 240px; line-height: 15px; margin: 10px auto 0}


.con_about_bot_title {font-size: 15.28px; margin-top: 20px;}
.con_about_bot_subtit {font-size: 11px; width: 396px; line-height: 16px; margin: 10px auto 20px;}



/*skill*/
.index .con_skill {padding-top: 40px;}


/*teamwidth: 255px; */
.index .con_team_users {margin-top: 40px;}
.index .con_team_item {height: 90px; padding-left: 25px; padding-right: 25px; display: inline-block}
.index .con_team_item .team_header {display: inline-block; float: left; border-radius: 45px;}
.index .con_team_item .con_team_con {float: left; margin-left: 24px;}
.index .con_team_item .con_team_name {text-align: left; font-size: 12.5px; color: white; margin-top: 15px}
.index .con_team_item .con_team_desc {text-align: left; font-size: 9.72px; color: white; margin-top: 5px; display: block;}
.index .con_team_item .con_team_tool {height: 22px; margin-top: 12px;}
.index .con_team_item .con_team_tool .con_team_tool_box {display: inline-block; position: relative}
.index .con_team_item .con_team_tool .con_team_tool_box div {position: absolute; width: 50px; height: 50px; bottom: -65px; left: -20px; background: #fff; visibility: hidden; padding: 4px; border-radius: 4px}
.index .con_team_item .con_team_tool .con_team_tool_plat {float: left; margin-right: 10px; border-radius: 11px}


.index .con_team_num {width: 200px; display: inline-block; padding: 50px 40px;}
.index .con_team_num .con_num_title {font-size: 28px; color: #000;}
.index .con_team_num .con_num_subtit {font-size: 12.5px; margin-top: 5px}
.index .con_work_con {vertical-align: middle; margin-bottom: 20px;}
.index .con_work_con .con_work_item {width: 110px; height: 50px; margin-top: 35px; display: inline-block}
.index .con_work_con .con_work_item img {
    -webkit-transition: all 0.6s ease 0.2s;
    -moz-transition: all 0.6s ease 0.2s;
    -ms-transition: all 0.6s ease 0.2s;
    -o-transition: all 0.6s ease 0.2s;
    transition: all 0.6s ease 0.2s;
}
.index .con_work_con .con_work_item p {margin-top: 5px; font-size: 12.5px}
.index .con_work_2 .center_div {margin: 0 auto; display: inline-block}
.index .con_work_2 .img_box {position: relative; width: 200px; height: 200px; float: left}
.index .con_work_2 .img_box .con_work_img {position: absolute; left: 0; top: 0; width: 200px; height: 200px; float: left; background: #ffaaaa;}
.index .con_work_2 .img_box p {background: rgba(0,0,0,0.3); position: relative; width: 100%; height: 100%; text-align: center; line-height: 200px; color: white; font-size: 20px;}

/*poly*/
.index .con_poly_sel {height: 28px; text-align: center;}
.index .con_poly_sel .sel_btn {font-size: 8.33px; line-height: 28px; color: #bdc3c7; display: inline-block;}
.index .con_poly_sel .sel_img {vertical-align: middle; margin: 0 20px;}
.index .con_poly_sel .arrow {vertical-align: middle; width: 12px; height: 11px;}

.index .con_poly_title {text-align: center;}

.index .con_poly_con {height: 464px; width: 814px; margin: 35px auto 0;}
.index .con_poly_con .poly_img {float: left; width: 536px; height: 464px}
.index .con_poly_con .poly_con {float: left; width: calc(100% - 558px); padding: 10px 0 0 22px}
.index .con_poly_con .poly_con h1 {font-size: 16.67px; color: #000}
.index .con_poly_con .poly_con p {font-size: 11.11px; color: #5f6f81; margin-top: 10px; line-height: 17px;}
.index .con_poly_con .poly_share {width: 100%; height: 28px; margin-top: 20px}
.index .con_poly_con .poly_share .share_btn {width: 120px; text-align: center; height: 26px; line-height: 26px; display: inline-block; border-radius: 13px; border: #000 solid 1px; font-size: 11.11px}
.index .con_poly_con .poly_share img {float: right; margin-right: 8px; height: 20px; padding: 4px 0}



/*client*/
.index .con_client_1 .client_tit {color: white; padding-top: 40px; font-size: 22px;}
.index .con_client_2 {position: relative}
.index .client_users {height: 80px; line-height: 80px; top: -40px; position: absolute;width: 100%}
.index .client_users .client_user_s {margin: 24px 12px; border-radius: 21px; border: white solid 1px}
.index .client_users .client_user_b { margin: auto 12px; border-radius: 40px; border: white solid 2px}
.index .client_con {position: absolute; top: 50px; width: 100%;  text-align: center}
.index .client_con span {font-size: 9.72px; color: #e74c3c; margin-top: 5px}


/*blog*/
.index .blog_con {width: 814px; height: 380px; margin: 30px auto 0px}
.index .blog_con .blog_item {width: calc((100% - 22px) / 2); height: 100%;}
.index .blog_con .blog_item .cover {height: 206px; width: 100%; border-bottom: #cc467c solid 3px; display: block}
.index .blog_con .blog_item .info {margin-top: 0px;}
.index .blog_con .blog_item .date {width: 52px; height: 150px; float: left; padding-top: 20px}
.index .blog_con .blog_item .date span {display: block}
.index .blog_con .blog_item .date .date_month {font-size: 12.5px; color: #bdc3c7}
.index .blog_con .blog_item .date .date_day {font-size: 22.22px; color: #bdc3c7}
.index .blog_con .blog_item .date .date_line {width: calc(100% - 16px); background:#bdc3c7; height: 1px; margin: 8px 8px;}
.index .blog_con .blog_item .date .date_zan {}
.index .blog_con .blog_item .date .data_num {font-size: 11.11px; color: #bdc3c7}


.index .blog_con .blog_item .con {width: 310px; height: 170px; margin-left:8px; float: left; position: relative; padding-left: 5px; text-align: left}
.index .blog_con .blog_item .con:before {position: absolute; content: ""; width: 3px; background: #d3dada; height: 130px; top: 20px; left: -3px}
.index .blog_con .blog_item .con h1 {font-size: 16.67px; line-height: 20px; color: #000; margin-top: 15px;}
.index .blog_con .blog_item .con span {font-size: 9px; color: #babfc6; margin-top: 12px;}
.index .blog_con .blog_item .con p {font-size: 11.11px; line-height: 14px; max-height: 42px; color: #5f6f81; margin-top: 5px;}

.index .blog_con .blog_item .con .blog_tool {height: 15px; width: 100%; position: absolute; bottom: 20px; line-height: 0px;}
.index .blog_con .blog_item .con .blog_tool img {height: 8px; vertical-align: middle;}
.index .blog_con .blog_item .con .blog_tool span {font-size: 9.72px; color: #000;}
.index .con_blog .blog_add {margin-top: 20px;}
.index .con_blog .blog_add_tit {font-size: 9.72px; color: #bdc3c7; display: block; margin-top: 4px;}


/*contact*/
.index .con_contact .local_info {margin-top: 15px;}
.index .con_contact .local_item {text-align: center; padding: 20px 70px; display: inline-block}
.index .con_contact .local_item img {display: block; margin: 0 auto}
.index .con_contact .local_item span {font-size: 9.72px; color: #fff; display: inline-block; margin-top: 8px;}

.index .con_contact .contact_msg {width: 54%; height: 200px; padding: 20px; border-radius: 4px; border: #fff solid 1px; margin: 35px auto 0; position: relative}
.index .contact_msg .msg_title {font-size: 16.67px; color: #fff;margin-top: 5px;}
.index .contact_msg .contact_info {height: 40px; }
.index .contact_msg .contact_item {border-bottom: #bebdbc solid 2px; height: 38px; width: calc((100% - 20px) / 2)}
.index .contact_msg .msg_item_tit {width: 50px; font-size: 11.11px; color: #bdc3c7; line-height: 38px; float: left; text-align: left}
.index .contact_msg input {float: left; margin-left: 20px; width: calc(100% - 80px); background: transparent; height: 38px; border: none; color: white; font-size: 16px;}

.index .contact_msg .contact_item_full {border-bottom: #bebdbc solid 2px; height: 38px; width: 100%;)}
.index .contact_msg button {font-size: 11.11px; color: white; width: 86px; height: 26px; border-radius: 13px; border: white solid 1px; background: transparent; position: absolute; bottom: 30px; right: 20px;}

.index .contact_other {margin-top: 20px;}
.index .contact_other .contact_tag {height: 18px;}
.index .contact_other .contact_tag img {width: 12px; height: 12px; padding: 3px 6px; position: relative; display: inline-block;}
.index .contact_other .contact_tag img {border-left: #c3bebb solid 1px}
.index .contact_other span {margin-top: 15px; font-size: 9.72px; color: white; display: block; line-height: 15px;}





.othercontent {padding: 0 20px;}
.otherbanner {height: 100px; line-height: 100px; text-align: center; background: #eb5256}
.otherbanner h1{color: white; font-size: 40px;}

.other_intro h1 {font-size: 50px; color: #666; margin-top: 85px; font-weight: 900}
.other_intro .skill_tit {}
.other_intro p {font-size: 12px; color: #666; margin-top: 50px; line-height: 18px;}
.other_intro .desc {font-size: 12px; color: #999; margin-top: 30px; display: block}
/*

skill
*/
.skill  img {display: inline-block}
.skill .othercontent ul {margin-top: 45px;}
.skill .othercontent  ul li {width: 50%; margin-bottom: 40px;}
.skill .othercontent  ul div {display: inline-block; margin-left: 10px;}
.skill .othercontent  ul span {display: block}
.skill .othercontent  ul .title {font-size: 18px; color: #666}
.skill .othercontent  ul .desc {font-size: 13px; color: #666; margin-top: 2px;}

.skill .cate_title {font-size: 40px; color: #666; font-weight: 900; margin-top: 65px}
.skill .ios h1 {font-size: 28px; color: #666; margin-top: 50px;}
.skill .ios ul li {width: 100%;}


/*

about
*/
.about .history {margin-bottom: 40px;}
.about .history .title {font-size: 40px; color: #666; font-weight: 900; height: 160px; line-height: 160px; color: #666;}
.about .history ul {text-align: center; width: 500px; margin: 0 auto}


/*
team
*/
.team .teams {margin-top: 80px; margin-bottom: 40px;}
.team .teams h1 {font-size: 40px; color: #666; font-weight: 900; height: 100px; line-height: 100px; color: #666;}
.team .teams ul {}
.team .teams li {width: 20%;}
.team .teams li img {width: 100%; display: block}




/*
prolist
*/

.prolist .list_cate {height: 36px; line-height: 36px; background: #fff; position: relative}
.prolist .list_cate .cate_tit {left: 10px; width: 60px; position: absolute; display: inline-block; color: #999; font-size: 12px;}
.prolist .list_cate ul {margin-left: 80px; display: inline-block}
.prolist .list_cate li {display: inline-block; padding: 0 13px;}
.prolist .list_cate li img {vertical-align: middle}
.prolist .list_cate li span {margin-left: 3px; color: #666; font-size: 12px;}

.prolist .cate_title {height: 70px; line-height: 70px; text-align: center; font-size: 20px;}

.prolist .prolist_con {}
.prolist .prolist_con ul {display: block;}
.prolist .prolist_con li {width: calc((100% - 4 * 10px) / 3); height: 350px; float: left; margin-bottom: 20px;}
.prolist .project_item {
    overflow: hidden;
    background: #fff;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    transition: all ease 0.3s;
}

.prolist .prolist_con li p {padding: 6px 15px; font-size: 18px; line-height: 26px; height: 48px; overflow: hidden; font-weight: bold}
.prolist .prolist_con li .pro_user {width: 40px; margin-left: 10px; margin-top: 8px;}
.prolist .prolist_con .prolist_info {margin-top: 15px; margin-left: 10px; padding-bottom: 10px; line-height: 0;}
.prolist .prolist_con .prolist_info .tag {font-size: 10px; color: #999;}
.prolist .prolist_con .prolist_info .cate {display: inline-block; float: right; background: #f0f0f0; line-height: 15px; padding: 0 5px; border-radius: 2px; margin-right: 10px;}
.prolist .prolist_con .prolist_info img {margin-left: 10px; vertical-align: middle}
.prolist .prolist_con button {height: 60px; font-size: 16px; color: #999; width: 100%; background: #fff; border: none; margin-top: 10px; margin-bottom: 50px;}


/*

project
*/

.project .pro_con {width: 700px; float: left; min-height: 1000px;}
.project .pro_con .pro_top {border-bottom: #999 solid 2px;}
.project .pro_con .pro_top h1 {font-weight: bold; padding: 35px 0; font-size: 28px; color: #000; line-height: 40px;}
.project .pro_info {height: 35px; margin-bottom: 10px;}
.project .pro_info .pro_date {float: left}
.project .pro_info .pro_date span {display: inline-block; line-height: 35px; font-size: 12px; color: #999}
.project .pro_info .pro_date .report {margin-left: 20px;}

.project .pro_info .pro_share {float: right; width: 200px;}
.project .pro_info .pro_share .pro_zan {float: left}
.project .pro_info .pro_share .pro_zan span {line-height: 35px; display: inline-block}
.project .pro_info .pro_share .pro_zan img {vertical-align: middle}
.project .pro_info .pro_share .share_plate {float: right}

.project .pro_con .pro_detail {margin-top: 20px; overflow: hidden}


.project .pro_other {width: 260px; float: right; min-height: 1000px; padding-top: 30px;}
.project .pro_user {padding: 10px; background: #f6f6f6; text-align: center}
.project .pro_user .pro_by {font-size: 10px; display: block; color: #999; text-align: left}
.project .pro_user .pro_user_cover {margin-top: 10px;}
.project .pro_user p {margin-top: 10px; font-size: 15px; color: #000; font-weight: bold}
.project .pro_user .pro_loca {margin-top: 12px; line-height: 12px; height: 12px;}
.project .pro_user .pro_loca span {font-size: 10px; color: #999; margin-left: 5px; display: inline-block;}
.project .pro_user .pro_loca img {vertical-align: middle}
.project .pro_user .pro_info {height: 40px; background: #00ff00; width: 220px; margin: 15px auto}
.project .pro_user .pro_info .pro_add {float: left; width: 80px; background: #fff; height: 40px; line-height: 40px;}
.project .pro_user .pro_info .pro_add span {font-size: 16px; color: #666; margin-left: 4px;}
.project .pro_user .pro_info .pro_msg {float: left; width: 140px; background: #666; height: 40px; line-height: 40px;}
.project .pro_user .pro_info .pro_msg img {vertical-align: middle;}
.project .pro_user .pro_info .pro_msg span {font-size: 16px; color: white; margin-left: 4px; display: inline-block;}

.project .pro_tit {height: 54px; line-height: 54px; background: #f0f0f0}
.project .pro_tit .title1 {font-size: 15px; color: #000; display: inline-block; float: left; margin-left: 10px}
.project .pro_tit .title2 {font-size: 13px; color: #666; display: inline-block; float: right; margin-right: 10px;}

.project .pro_list {padding: 20px; background: #f6f6f6}
.project .pro_list li {margin-bottom: 20px;}
.project .pro_list p {padding: 10px; font-size: 16px; color: #000;}


/*
    相册
*/
.photo .photo_box {min-height: 100px; background: white; padding: 20px 0 0; margin-top: 45px;}
.photo .photo_box .placehold {font-size: 40px; color: #999; font-weight: bold; line-height: 100px; text-align: center}
.photo .photo_add {width: 100px; height: 100px; float: right; margin-top: 30px; background: #fff; font-size: 20px; color: #666; border: none; border-radius: 10px;}
.photo .create_hover {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1001; visibility: hidden}
.photo .create_hover_box {width: 500px; height: 260px; background: #fff; margin: 200px auto; text-align: center; padding: 30px; position: relative}
.photo .create_hover_box .dirname {background: #f0f0f0; border: #999 solid 1px; height: 40px; width: 440px; font-size: 20px; padding: 0 10px;}
.photo .create_hover_box .dirdesc {width: 440px; padding: 10px; margin-top: 30px; height: 100px;}
.photo .create_hover_box button {width: 60px; height: 40px; float: right; margin-top: 30px; margin-right: 20px}
.photo .create_hover_box img {position: absolute; right: 10px; top: 10px;}
.photo .photo_box .img_box {position: relative; width: 295px; height: 295px; background: #f0f0f0; margin: 0 18px 36px; overflow: hidden; float: left; border-radius: 10px;}
.photo .photo_box .img_box img {position: absolute; left: 0; top: 0px; border-radius: 10px;}
.photo .photo_box .img_box p {font-size: 40px; color: white; position: relative; line-height: 295px; text-align: center; background: rgba(0,0,0,0.4); border-radius: 10px;}


/*
    相册浏览
*/

.photoskim .skim_box {min-height: 100px; background: white; padding: 20px 0 0; margin-top: 45px;}
.photoskim .skim_box .img_box {width: 180px; height: 180px; background: #f0f0f0; margin: 0 10px 20px; overflow: hidden; float: left; border-radius: 5px;}
.photoskim form { margin-top: 20px; width: 300px; float: right}
.photoskim .addimg {width: 300px; height: 50px; float: right;background: #fff; font-size: 20px; color: #666; border: none;}
.photoskim .submitimg {width: 150px; height: 30px; float: right; margin-top: 20px; margin-right: 0px; background: #fff; border: none; border-radius: 5px;}



/*
发布文章
*/
.publish .title_box {margin-top: 30px; height: 150px;}
.publish .title_left {width: calc(74% - 40px); float: left; background: #fff; height: calc(100% - 40px); padding: 20px;}
.publish .title_right {width: 23.5%; float: right; background: #fff; height: 100%; position: relative}
.publish .title_left input {width: calc(100% - 20px - 4px);height: 40px; font-size: 16px; border: #d0d0d0 solid 2px; padding-left: 10px; padding-right: 10px; color: #999}
.publish .title_left .title_alert {height: 30px;text-align: end ;float: right; line-height: 30px; font-size: 13px; color: #666;}
.publish .title_left ul {height: 40px; margin-top: 30px; line-height: 40px;}
.publish .title_left ul li {width: 80px; text-align: center;}
.publish .title_left ul img {width: 18px; height: 18px; vertical-align: middle}
.publish .title_left ul span {font-size: 15px; color: #999; margin-left: 6px;}

.publish .title_right img {background: #f0f0f0; width: 100%; height: 100%; position: absolute; left: 0; top: 0}
.publish .title_right div {height: 40px; width: 100%; line-height: 40px; position: absolute; bottom: 0; left: 0; text-align: center;}
.publish .title_right div input {opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.publish .title_right div span {position: absolute; left: 0; top: 0; width: 100%; background: rgba(0,0,0,0.4); color: #fff; font-size: 13px;}

.publish .content_box {min-height: 500px; width: 100%; background: #fff; margin-top: 35px;}
.publish .publish_control{position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background: #e0e0e0; z-index: 10000}
.publish .publish_control .control_box {width: 1000px; height: 100%; margin: 0 auto; overflow: hidden}
.publish .publish_control .publish_post {float: right; width: 320px; height: 100%; background: #ff3366; color: #fff; font-size: 18px; border: none}
.publish .publish_control .publish_draft {float: right; width: 120px; height: 100%; background: #999; font-size: 18px; color: #fff; border: none}
.publish .publish_control span {font-size: 12px; color: #666; line-height: 50px;}


.publish .desc_box {height: 130px; width: 100%; margin-top: 10px; margin-bottom: 100px;}
.publish .desc_box .desc_tit {height: 50px;line-height: 50px;}
.publish .desc_box .desc_tit p {display: inline-block; color: #666; font-size: 18px;}
.publish .desc_box .desc_tit span {color: #999; font-size: 11px; display: inline-block;}
.publish .desc_box .desc {height: 40px; padding: 20px; background: #fff;}
.publish .desc_box .desc input {height: 40px; border: #d0d0d0 solid 1px; width: calc(100% - 20px - 2px); padding-left: 10px; padding-right: 10px; font-size: 16px;}


.movie_con {padding-top: 30px; padding-left: 60px; padding-right: 60px;}
.movie_con .covercon {width: 240px; height: 330px; float: left;}
.movie_con .covercon .cover {width: 240px; height: 330px;}
.movie_con .content {width: 600px; height: 400px; float: right;}
.movie_con .content .title {width: 100%; font-size: 18px; color: #666}
.movie_con .content .desc {width: 100%; margin-top: 20px; font-size: 13px; color: #666}
.movie_con .content .dtitle {margin-top: 30px; font-size: 13px; color: #666}
.movie_con .content ul {margin-top: 30px; list-style: square; margin-left: 20px; width: 600px;}
.movie_con .content li {float: none; margin-top: 10px;}
.movie_con .content textarea {width: 600px; height: 20px;}
/*

    视频 详情页面

*/

/**/



/*

    登录
*/

.login .title {font-size: 40px; color: #111; text-align: center; margin-top: 70px; margin-bottom: 30px; font-weight: bold}
.login .login_box {width: 400px; height: 350px; background: #e9e9e9; margin: 0 auto; padding-top: 30px; position: relative}
.login .login_box .tit_box {height: 20px; line-height: 20px; margin-left: 40px; margin-right: 40px;}
.login .login_box .login_tit {font-size: 16px; color: #333}
.login .login_box .tit_box div {float: right; line-height: 20px;}
.login .login_box .tit_box div .grayspan {font-size: 11px; color: #666;}
.login .login_box .tit_box div .redspan {font-size: 11px; color: #ff3366}
.login .login_box .login_input {margin-top: 22px; width: calc(100% - 82px - 10px); margin-left: 40px; margin-right: 40px; height: 40px; border: #999 solid 1px; font-size: 14px; color: #666; padding-left: 5px; padding-right: 5px;}
.login .login_box .searchbtn {background: rgba(255,255,255,0); float: right; height: 16px; margin-top: 10px; margin-right: 40px; border: none; color: #999; font-size: 11px;}
.login .login_box .loginbtn {height: 40px; margin-top: 12px; background: #ff3366; color: white; border: none; font-size: 15px; width: calc(100% - 80px); margin-left: 40px;}
.login .login_box .other_plat {position: absolute; bottom: 0; left: 0; height: 100px; width: 100%; background: #dbdbdb; text-align: center; vertical-align: middle; line-height: 100px}
.login .login_box .other_plat img {display: inline; margin: 30px 15px;}


/*


    个人信息
*/
.user .user_box {margin-top: 30px;}
.user .user_left {width: 70%; float: left;}
.user .user_right {width: 29%; float: right; min-height: 600px}

.user .user_left .box_basic {height: 160px; width: 100%; background: #fff; position: relative}
.user .user_left .box_info {min-height: 400px; width: 100%; margin-top: 10px; background: #fff; margin-bottom: 60px;}


.user .box_basic .write {position: absolute; display: block; right: 20px; top: 15px; width: 60px; height: 30px; line-height: 30px; text-align: center; background: #ff3366; color: #fff; font-size: 14px; border: none;}
.user .box_basic img {width: 160px; height: 160px; float: left}
.user .box_basic .basic {height: 130px; width: calc(100% - 200px); float: left; padding: 15px 20px; position: relative}
.user .box_basic p {font-size: 17px; color: #333}
.user .box_basic span {font-size: 15px; color: #666; margin-top: 12px;display: block}
.user .box_basic .honour_box {position: absolute; left: 20px; bottom: 15px; width: 130px; height: 30px;}
.user .box_basic .btn_box {position: absolute; right: 20px; bottom: 15px; width: 280px; height: 36px;}
.user .box_basic .btn_box .editbtn {float: right; width: 180px; height: 100%; background: #333; font-size: 15px; color: #fff; border: none}
.user .box_basic .btn_box .authbtn {float: left; width: 95px; height: 100%; background: #ff3366; font-size: 15px; color: #fff; border: none}

.user .box_info li {width: 100%;}
.user .box_info .pro_tit {height: 50px; width: 150px; line-height: 50px; font-size: 15px; background: #333; color: #fff; text-align: center}
.user .box_info .pro_box {width: calc(100% - 40px); padding: 30px 20px; border-bottom: #f0f0f0 solid 1px;}
.user .box_info .pro_cover {width: 160px; height: 100px; overflow: hidden; float: left}
.user .box_info .pro_info {width: calc(100% - 190px); float: left; padding: 0 15px;}
.user .box_info .pro_info h1 {max-height: 56px; line-height: 28px; font-size: 20px; margin-top: 4px;}
.user .box_info .pro_info .pro_other {margin-top: 10px; height: 16px; line-height: 0px;}
.user .box_info .pro_info span {font-size: 10px; color: #999; display: inline-block;}
.user .box_info .pro_info .pro_tag {vertical-align: middle}
.user .box_info .pro_info p {margin-top: 8px; font-size: 12px; color: #666; max-height: 30px; line-height: 15px; overflow: hidden}
.user .box_info .pro_info .edit_pro {float: right; width: 40px; height: 20px; margin-top: 10px; background: #00ff00; display: block}
.user .box_info .pro_info .edit_pro span {line-height: 20px; text-align: center; display: block; font-size: 10px; color: #666; background: #f0f0f0}


.user .box_info .morebtn {height: 40px; width: 100%; background: #f6f6f6; line-height: 40px; font-size: 12px; color: #999; border: none;}

.user .user_right .box_progress {height: 159px; width: 100%; background: #fff; padding-top: 1px; position: relative}
.user .user_right .box_other {min-height: 400px; width: calc(100% - 40px); background: #fff; margin-top: 10px; padding: 20px;}

.user .box_progress .circle_box {width: 80px; height: 80px; background: #fff; margin-top: 30px; margin-left: 30px; border: #e0e0e0 solid 10px; border-radius: 50px; overflow: hidden; position: relative}
.user .box_progress .progress {position: absolute; bottom: 0; left: 0; background: #ff3366; height: 60px; width: 80px;}
.user .box_progress .progress_info {position: absolute; height: 160px; width: calc(100% - 160px); left: 130px; top: 0px;}
.user .box_progress .progress_info span {display: block}
.user .box_progress .progress_info .title{position: absolute; top: 55px; height: 20px; width: 100%; line-height: 20px; font-size: 12px; color: #333; text-align: end;}
.user .box_progress .progress_info .line{ position: absolute; width: 100%; background: #e0e0e0; height: 2px; top: 79px; left: 0px}
.user .box_progress .progress_info .edit{position: absolute; bottom: 55px; height: 20px; width: 100%; line-height: 20px; font-size: 12px; color: #6f89f1; text-align: end;}

.user .box_other p {font-size: 14px; color: #333}
.user .box_other .index_box {margin-top: 20px; margin-bottom: 40px; height: 20px; width: 100%;}
.user .box_other .index_box img {vertical-align: middle}
.user .box_other .index_box span {font-size: 11px; color: #666}
.user .box_other .user_box {width: 100%;}
/*.user .box_other .user_box ul {width: 100%; background: #ff0000; display: block}*/
.user .box_other .user_box li {margin-bottom: 10px; width: 100%;}
.user .box_other .user_box .user {height: 50px; width: 100%;}
.user .box_other .user_box .user img {width: 50px; height: 50px; float: left}
.user .box_other .user_box .user .user_info {width: calc(100% - 70px); height: 40px; float: left; padding: 5px 10px}
.user .box_other .user_box .user .user_info p {height: 15px; margin-top: 3px; line-height: 15px; font-size: 14px; color: #111}
.user .box_other .user_box .user .user_info span {height: 14px; margin-top: 5px; line-height: 14px; display: block; font-size: 12px; color: #666}

    /*
        Animate
    */
/**/
/*video hover*/
.index_video_animate {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);

}
.index_skill_animate {
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}
/**/

/*
prolist
*/

.prolist_item_animate {
    -webkit-transform: translate(4px, -4px);
    -moz-transform: translate(4px, -4px);
    -ms-transform: translate(4px, -4px);
    -o-transform: translate(4px, -4px);
    transform: translate(4px, -4px);
    -webkit-box-shadow: 5px 5px 5px #999999;
    -moz-box-shadow: 5px 5px 5px #999999;
    box-shadow: 5px 5px 5px #999999;
}